import React from 'react';
import { Form, Input, Button, Select, Divider } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './style.less';

const { Option } = Select;

export default ({ formItemLayout, form, match, dispatch }) => {
    const { getFieldDecorator, validateFields } = form;
    const onValidateForm = () => {
        validateFields((err, values) => {
            if (!err) {
                dispatch({
                    type: 'service_order/saveStepFormData',
                    payload: values,
                });
                console.log(match);
                const url = `/service/order/${match}/choose`;
                console.log(url);
                dispatch(routerRedux.push(url));
            }
        });
    };
  return (
    <div>
      <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
        <Form.Item
          {...formItemLayout}
          label="订单金额"
        >
          {getFieldDecorator('amount', {
            initialValue: '100',
            rules: [
              { required: true, message: '请输入订单金额' },
              { pattern: /^(\d+)((?:\.\d+)?)$/, message: '请输入合法金额数字' },
            ],
          })(
            <Input prefix="￥" placeholder="订单金额" />
          )}
        </Form.Item>
        <Form.Item
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
          }}
          label=""
        >
          <Button type="primary" onClick={onValidateForm}>
            下一步
          </Button>
        </Form.Item>
      </Form>
      <Divider style={{ margin: '40px 0 24px' }} />
      <div className={styles.desc}>
        <h3>说明</h3>
        <h4>操作服务订单，需要联系用户协商，价格在验收之后不能修改，取消订单只能在验收前取消</h4>
      </div>
    </div>
  );
};
